<template>
  <div>    
    <van-pull-refresh v-model="loading" @refresh="onRefresh" success-text="刷新成功">
        <router-view/>
        
        <div class="bottom-nav">
          <span style="font-size: 50px;">元气森林</span>
          <div style="color: #999;"><van-icon name="good-job" />有赞提供技术支持</div>
        </div>
    </van-pull-refresh>
      <van-tabbar v-model="active">
        <van-tabbar-item icon="wap-home-o" to="/home/index">
          首页
        </van-tabbar-item>
        <van-tabbar-item icon="bag-o" to="/home/shopping">
          商品分类
        </van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o" to="/home/cart">
          购物车
        </van-tabbar-item>
        <van-tabbar-item icon="contact" to="/home/my">
          我的
        </van-tabbar-item>
      </van-tabbar>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const active = ref(0);
    const loading = ref(false);
    const onRefresh = () => {
      setTimeout(() => {
        loading.value = false;
      }, 1000);
    };
</script>

<style scoped>

.bottom-nav{
    width: 100%;
    padding: 20px 0;
    margin-bottom: 48px ;
    text-align: center;
    background: #eee;
    z-index: 10000;
  }
</style>